<template>
  <s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">

	  <!--<su-sticky bgColor="#fff">
		  <su-tabs
				  :list="tabMaps"
				  :scrollable="true"
				  @change="onTabsChange"
				  :current="state.currentTab"
		  ></su-tabs>
	  </su-sticky>-->

    <view v-if="state.list.length">
      <s-address-item
          hasBorderBottom
          v-for="item in state.list"
          :key="item.id"
          :item="item"
          @tap="onSelect(item)"
      >
      </s-address-item>
    </view>

    <su-fixed bottom placeholder>
      <view class="footer-box ss-flex ss-row-between ss-p-20">
        <button
            class="add-btn ss-reset-button ui-Shadow-Main"
            @tap="sheep.$router.go('/pages/user/address/edit')"
        >
          新增收货地址
        </button>
      </view>
    </su-fixed>
    <s-empty
        v-if="state.list.length === 0 && !state.loading"
        text="暂无收货地址"
        icon="/static/data-empty.png"
    />
  </s-layout>
</template>

<script setup>
  import { reactive, onBeforeMount } from 'vue';
  import {onLoad, onShow} from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import {clone, isEmpty} from 'lodash';

  const tabMaps = [
	  {
		  name: '我的地址(国内地址)',
		  value: '0',
	  },
	  {
		  name: '拼邮地址(日本仓库)',
		  value: '1',
	  },
	  {
		  name: '直邮地址(日本仓库)',
		  value: '2',
	  }
  ];

  const state = reactive({
    list: [],
	  currentTab: 0,
	  postCode: null,
    loading: true,
  });

  // 选择收货地址
  const onSelect = (addressInfo) => {
    uni.$emit('SELECT_ADDRESS', {
      addressInfo: addressInfo, addressInfoJp: null
    });
	  uni.$emit('SELECT_ADDRESS_JP', {
		  addressInfo: null, addressInfoJp: addressInfo
	  });
    sheep.$router.back();
  };

  onLoad(async (options) => {
	  console.log(options)
	  state.postCode = options.postCode
	  state.currentTab = options.postCode
    const res = await sheep.$api.user.address.list({
	    postCode: state.currentTab
    });
    state.list = res
    console.log('res:', res)
    state.loading = false;
  });

  onShow(async () => {
	  const res = await sheep.$api.user.address.list({
		  postCode: state.currentTab
	  });
	  state.list = res
	  console.log('res:', res)
	  state.loading = false;
  });

  // 切换选项卡
  async function onTabsChange(e) {
	  if (state.currentTab === e.index) return;

		if (state.postCode == 0) {
			if (e.index != 0) {
				sheep.$helper.toast('请选择国内地址')
				return
			}
		} else {
			if (e.index == 0) {
				sheep.$helper.toast('请选择日本仓库地址')
				return
			}
		}

	  state.currentTab = e.index;
	  const res = await sheep.$api.user.address.list({
		  postCode: state.currentTab
	  });
	  state.list = res
	  console.log('res:', res)
	  state.loading = false;
  }

  onBeforeMount(() => {
    if (!!uni.getStorageSync('areaData')) {
      return;
    }
    // 提前加载省市区数据
    sheep.$api.data.area().then((res) => {
      uni.setStorageSync('areaData', res.data);
    });
  });
</script>

<style lang="scss" scoped>
  .footer-box {
    .add-btn {
      flex: 1;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      border-radius: 80rpx;
      font-size: 30rpx;
      font-weight: 500;
      line-height: 80rpx;
      color: $white;
      position: relative;
      z-index: 1;
    }

    .sync-wxaddress {
      flex: 1;
      line-height: 80rpx;
      background: $white;
      border-radius: 80rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: $dark-6;
      margin-right: 18rpx;
    }
  }
</style>
